<template>
	<view class="container">
		<view class="form-section">
			<view class="form-title">添加执裁记录</view>
			
			<view class="form-group">
				<view class="form-label required">比赛名称</view>
				<input 
					class="form-input" 
					v-model="formData.match_title" 
					placeholder="请输入比赛名称"
					maxlength="100"
				/>
			</view>
			
			<view class="form-group">
				<view class="form-label required">执裁职位</view>
				<picker 
					mode="selector" 
					:value="positionIndex" 
					:range="positionOptions"
					@change="onPositionChange"
				>
					<view class="form-input picker-input" :class="{'placeholder': positionIndex === -1}">
						{{positionIndex >= 0 ? positionOptions[positionIndex] : '请选择执裁职位'}}
					</view>
				</picker>
			</view>
			
			<view class="form-group">
				<view class="form-label required">比赛级别</view>
				<picker 
					mode="selector" 
					:value="levelIndex" 
					:range="levelOptions"
					@change="onLevelChange"
				>
					<view class="form-input picker-input" :class="{'placeholder': levelIndex === -1}">
						{{levelIndex >= 0 ? levelOptions[levelIndex] : '请选择比赛级别'}}
					</view>
				</picker>
			</view>
			
			<view class="form-group">
				<view class="form-label required">比赛日期</view>
				<picker 
					mode="date" 
					:value="formData.match_date" 
					@change="onDateChange"
					:end="today"
				>
					<view class="form-input picker-input" :class="{'placeholder': !formData.match_date}">
						{{formData.match_date || '请选择比赛日期'}}
					</view>
				</picker>
			</view>
			
			<view class="form-group">
				<view class="form-label">比赛场地</view>
				<input 
					class="form-input" 
					v-model="formData.match_venue" 
					placeholder="请输入比赛场地"
					maxlength="100"
				/>
			</view>
			
			<view class="form-group">
				<view class="form-label">主队名称</view>
				<input 
					class="form-input" 
					v-model="formData.home_team" 
					placeholder="请输入主队名称"
					maxlength="50"
				/>
			</view>
			
			<view class="form-group">
				<view class="form-label">客队名称</view>
				<input 
					class="form-input" 
					v-model="formData.away_team" 
					placeholder="请输入客队名称"
					maxlength="50"
				/>
			</view>
			
			<view class="form-group">
				<view class="form-label">执裁评分</view>
				<picker 
					mode="selector" 
					:value="ratingIndex" 
					:range="ratingOptions"
					@change="onRatingChange"
				>
					<view class="form-input picker-input" :class="{'placeholder': ratingIndex === -1}">
						{{ratingIndex >= 0 ? ratingOptions[ratingIndex] + '分' : '请选择执裁评分(1-10分)'}}
					</view>
				</picker>
			</view>
			
			<view class="form-group">
				<view class="form-label">出勤状态</view>
				<picker 
					mode="selector" 
					:value="attendanceIndex" 
					:range="attendanceLabels"
					@change="onAttendanceChange"
				>
					<view class="form-input picker-input" :class="{'placeholder': attendanceIndex === -1}">
						{{attendanceIndex >= 0 ? attendanceLabels[attendanceIndex] : '请选择出勤状态'}}
					</view>
				</picker>
			</view>
			
			<view class="form-group">
				<view class="form-label">裁判费用(元)</view>
				<input 
					class="form-input" 
					v-model="formData.referee_fee" 
					placeholder="请输入裁判费用"
					type="digit"
				/>
			</view>
			
			<view class="form-group">
				<view class="form-label">执裁表现评价</view>
				<textarea 
					class="form-textarea" 
					v-model="formData.performance_evaluation" 
					placeholder="请输入执裁表现评价"
					maxlength="500"
				/>
			</view>
			
			<view class="form-group">
				<view class="form-label">监督员评价</view>
				<textarea 
					class="form-textarea" 
					v-model="formData.supervisor_comment" 
					placeholder="请输入监督员评价（如有）"
					maxlength="500"
				/>
			</view>
		</view>
		
		<view class="button-section">
			<button class="submit-btn" @click="submitRecord" :disabled="submitting">
				{{submitting ? '提交中...' : '提交记录'}}
			</button>
			<button class="cancel-btn" @click="goBack">取消</button>
		</view>
	</view>
</template>

<script>
	import { getToken } from '@/utils/tokenManager.js';
	
	export default {
		data() {
			return {
				formData: {
					match_title: '',
					position: '',
					match_level: '',
					match_date: '',
					match_venue: '',
					home_team: '',
					away_team: '',
					execution_rating: null,
					attendance_status: 'present',
					referee_fee: '',
					performance_evaluation: '',
					supervisor_comment: ''
				},
				positionOptions: ['主裁判', '助理裁判', '第四官员', '裁判监督'],
				positionIndex: -1,
				levelOptions: ['校级', '区级', '市级', '省级', '国家级', '国际级'],
				levelIndex: -1,
				ratingOptions: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				ratingIndex: -1,
				attendanceOptions: ['present', 'absent', 'late'],
				attendanceLabels: ['正常出勤', '缺勤', '迟到'],
				attendanceIndex: 0, // 默认正常出勤
				submitting: false,
				today: ''
			}
		},
		onLoad() {
			// 设置今天的日期作为最大可选日期
			const today = new Date();
			this.today = `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`;
		},
		methods: {
			// 职位选择
			onPositionChange(e) {
				this.positionIndex = e.detail.value;
				this.formData.position = this.positionOptions[this.positionIndex];
			},
			
			// 级别选择
			onLevelChange(e) {
				this.levelIndex = e.detail.value;
				this.formData.match_level = this.levelOptions[this.levelIndex];
			},
			
			// 日期选择
			onDateChange(e) {
				this.formData.match_date = e.detail.value;
			},
			
			// 评分选择
			onRatingChange(e) {
				this.ratingIndex = e.detail.value;
				this.formData.execution_rating = this.ratingOptions[this.ratingIndex];
			},
			
			// 出勤状态选择
			onAttendanceChange(e) {
				this.attendanceIndex = e.detail.value;
				this.formData.attendance_status = this.attendanceOptions[this.attendanceIndex];
			},
			
			// 表单验证
			validateForm() {
				if (!this.formData.match_title.trim()) {
					uni.showToast({
						title: '请输入比赛名称',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.formData.position) {
					uni.showToast({
						title: '请选择执裁职位',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.formData.match_level) {
					uni.showToast({
						title: '请选择比赛级别',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.formData.match_date) {
					uni.showToast({
						title: '请选择比赛日期',
						icon: 'none'
					});
					return false;
				}
				
				// 验证裁判费用格式
				if (this.formData.referee_fee && !/^\d+(\.\d{1,2})?$/.test(this.formData.referee_fee)) {
					uni.showToast({
						title: '请输入正确的费用格式',
						icon: 'none'
					});
					return false;
				}
				
				return true;
			},
			
			// 提交记录
			async submitRecord() {
				if (!this.validateForm()) {
					return;
				}
				
				this.submitting = true;
				
				try {
					const token = getToken();
					
					// 处理数据格式
					const recordData = {
						...this.formData,
						match_date: new Date(this.formData.match_date),
						referee_fee: this.formData.referee_fee ? parseFloat(this.formData.referee_fee) : 0
					};
					
					const refereeRecordService = uniCloud.importObject('referee-record-service');
					const res = await refereeRecordService.addRefereeRecord({
						token: token,
						recordData: recordData
					});
					
					if (res && res.code === 0) {
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						});
						
						// 延迟返回上一页
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: res ? res.message : '添加失败',
							icon: 'none'
						});
					}
					
				} catch (error) {
					console.error('添加执裁记录失败:', error);
					uni.showToast({
						title: '添加失败：' + error.message,
						icon: 'none'
					});
				} finally {
					this.submitting = false;
				}
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.form-section {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 40rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}
	
	.form-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 40rpx;
		text-align: center;
	}
	
	.form-group {
		margin-bottom: 30rpx;
	}
	
	.form-label {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 15rpx;
		font-weight: bold;
	}
	
	.form-label.required::after {
		content: ' *';
		color: #FF4444;
	}
	
	.form-input {
		width: 100%;
		padding: 25rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 15rpx;
		font-size: 28rpx;
		color: #333333;
		background-color: #ffffff;
		box-sizing: border-box;
	}
	
	.form-input:focus {
		border-color: #1BAE76;
	}
	
	.picker-input {
		display: flex;
		align-items: center;
		height: 80rpx;
	}
	
	.picker-input.placeholder {
		color: #999999;
	}
	
	.form-textarea {
		width: 100%;
		padding: 25rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 15rpx;
		font-size: 28rpx;
		color: #333333;
		background-color: #ffffff;
		min-height: 120rpx;
		box-sizing: border-box;
	}
	
	.form-textarea:focus {
		border-color: #1BAE76;
	}
	
	.button-section {
		padding: 0 20rpx 40rpx;
	}
	
	.submit-btn {
		width: 100%;
		height: 100rpx;
		background-color: #1BAE76;
		color: #ffffff;
		border: none;
		border-radius: 50rpx;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.submit-btn:disabled {
		background-color: #cccccc;
	}
	
	.cancel-btn {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		color: #666666;
		border: 2rpx solid #e0e0e0;
		border-radius: 50rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style> 